<template>
	<view>
		<view class="navWrap">
			<view class="safe">
				<view class="navList">
					<block v-for="(item, index) in navList" :key="index">

						<view class="item" @tap="navTap(item, index)">
							<!-- #ifdef H5 -->
							<image
								:src="current == index ? 'https://www.atuanjian.com/appletStatic/static/' + item.selectedIconPathH5 : 'https://www.atuanjian.com/appletStatic/static/' + item.iconPathH5"
								mode="aspectFit"></image>
							<!-- #endif -->

							<!-- #ifdef MP-WEIXIN -->
							<image :src="current == index ? item.selectedIconPath : item.iconPath" mode="aspectFit">
							</image>
							<!-- #endif -->
							<text :class="current == index ? 'text active' : 'text'">{{ item.text }}</text>
						</view>
						<block v-if="false">
							<view class="item items" v-if="callPhone == false">
								<view class="img">
									<!-- #ifdef MP-WEIXIN -->
									<image @tap="navTap(item, index)" :src="item.iconPath" mode="aspectFit"></image>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<image @tap="navTap(item, index)"
										:src="'https://www.atuanjian.com/appletStatic/static/' + item.iconPathH5"
										mode="aspectFit"></image>
									<!-- #endif -->
								</view>
								<text :class="current == index ? 'text active' : 'text'">{{ item.text }}</text>
							</view>

							<view class="item" @click="makePhoneCall()" v-else>
								<!-- #ifdef MP-WEIXIN -->
								<image :src="current == index ? item.selectedIconPath : item.iconPath" mode="aspectFit">
								</image>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<image
									:src="current == index ? 'https://www.atuanjian.com/appletStatic/static/' + item.selectedIconPathH5 : 'https://www.atuanjian.com/appletStatic/static/' + item.iconPathH5"
									mode="aspectFit"></image>
								<!-- #endif -->

								<text :class="current == index ? 'text active' : 'text'">{{ item.text }}</text>
							</view>
						</block>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "tabBar",
	data() {
		return {
			// current:0,
			navList: [
				{
					"pagePath": "/pages/home/home",
					"text": "首页",
					"iconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon00.svg",
					"selectedIconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon01.jpg",
					"iconPathH5": "i1.png",
					"selectedIconPathH5": "ia1.png"
				},
				{
					"pagePath": "/pagesA/dynamic/dynamic",
					"text": "动态",
					"iconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon02.svg",
					"selectedIconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon03.jpg",
					"iconPathH5": "i2.png",
					"selectedIconPathH5": "ia2.png"
				},
				{
					"pagePath": "/pagesB/release/release",
					"text": "活动专区",
					"iconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon04.svg",
					"selectedIconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon06.jpg",
					"iconPathH5": "i3.png",
					"selectedIconPathH5": "ia3.png"
				},
				{
					"pagePath": "/pagesB/shopCar/shopCar",
					"text": "购物车",
					"iconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon05.svg",
					"selectedIconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon08.jpg",
					"iconPathH5": "i4.png",
					"selectedIconPathH5": "ia4.png"
				},
				{
					"pagePath": "/pages/mine/mine",
					"text": "我的",
					"iconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon07.svg",
					"selectedIconPath": "https://www.atuanjian.com/appletStatic/static/images/table-icon/icon09.jpg",
					"iconPathH5": "i5.png",
					"selectedIconPathH5": "ia5.png"
				}
				// ,{ 
				// 	"text": "联系我们",
				// 	"iconPath": "https://www.atuanjian.com/appletStatic/static/phone.png", 
				// }
			]
		};
	},
	props: {
		current: {
			type: String,
			default: '0'
		},
		callPhone: {
			type: Boolean,
			default: false // true false 
		}
	},
	methods: {
		makePhoneCall() {
			uni.makePhoneCall({
				phoneNumber: '13022861002'
			})
		},
		navTap(item, index) {

			uni.redirectTo({
				url: item.pagePath
			})
			return;
			if (this.current != index) {
				// this.current=index
				if (this.current != 2) {
					console.log(item, index, 123456)
					// 首页 动态 购物车 我的
					// return
					console.log(item.pagePath, index)
					// return 
					if (index != 2) {
						// if(uni.getStorageSync('userInfo')){

						uni.redirectTo({
							url: item.pagePath
						})
						// }else{
						// 	uni.redirectTo({
						// 		url:'/pages/mine/mine'
						// 	})
						// }
					} else {
						uni.navigateTo({
							url: '/pagesB/release/release'
						})
					}
				} else {
					console.log('==2')
					// 活动专区
					// uni.navigateTo({
					// 	url:'/pagesB/release/release'
					// })
				}
			}
		},
	},
	created() {
		/* if(this.callPhone==true){
			this.navList[2]={
				"text": "联系我们",
				"iconPath": "https://www.atuanjian.com/appletStatic/static/phone.png",
				"iconPathH5": "phone.png",
				"selectedIconPathH5": "phone.png"
			}
		}else{
			this.navList[2]={
				"pagePath": "pages/home/home",
				"text": "活动专区",
				"iconPath": "https://www.atuanjian.com/appletStatic/static/i3.png", 
				"iconPathH5": "i3.png",
				"selectedIconPathH5": "ia3.png"
			}
		} */
	}

}
</script>

<style lang="scss">
.navWrap {
	width: 750rpx;
	height: 120rpx;
	padding-bottom: 0;

	// padding-bottom: constant(safe-area-inset-bottom);  
	// padding-bottom: env(safe-area-inset-bottom);  
	.safe {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 90;
		width: 750rpx;
		height: 98rpx;
		padding-bottom: 0;

		// padding-bottom: constant(safe-area-inset-bottom);  
		// padding-bottom: env(safe-area-inset-bottom);  
		.navList {
			width: 750rpx;
			height: 98rpx;
			background: rgb(255, 255, 255); //.39
			box-shadow: 0px 0px 8rpx rgba(95, 95, 95, 0.16);
			box-sizing: border-box;
			padding: 12rpx 0; //72rpx
			display: flex;
			justify-content: space-between;
			align-items: center;

			padding-bottom: 36rpx;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				image {
					width: 46rpx;
					height: 46rpx;
					display: block;
				}

				.text {
					font-size: 20rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 26rpx;
					color: #979797;
				}

				.active {
					color: #FFB850;
				}
			}

			.items {
				justify-content: flex-end;

				.img {
					width: 46rpx;
					height: 46rpx;
					position: relative;

					image {
						width: 80rpx;
						height: 80rpx;
						display: block;
						position: absolute;
						bottom: 0;
						left: -10px;
					}
				}
			}
		}
	}
}
</style>
